<template name="points">
	<view :style="$s.view_color">
		<view class="points-box">
		    <view class="header">
		        <text class="t1">积分抵扣</text>
		    </view>
		    <view class="inner">
				<view class="row">
		            <text class="label">剩余积分</text>
		            <view class="flex"></view>
		            <text class="amount red">{{ points_info.user_points }}分</text>
		        </view>
		        <view class="row">
		            <text class="label">使用积分</text>
		            <view class="flex"></view>
		            <input 
		                v-model="points_info.use_points"
						class="input-number"
		                :type="'number'"
		                :placeholder="'请输入积分'"
		                @input="handleInput"
		                :maxlength="10"
		            ></input>
		        </view>
			    <view class="row">
			        <text class="label">抵扣金额</text>
			        <view class="flex"></view>
			        <text class="amount red">￥{{ points_info.points_money }}</text>
			    </view>
		        <view class="row">
		            <text class="label">本单可获得积分</text>
		            <view class="flex"></view>
		            <text class="amount red">{{ points_info.gift_points }}分</text>
		        </view>
		    </view>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
	    props: {
	        info: {
	            type: [Object, Array],
	            default: () => ({})
	        }
	    },
	    data() {
	        return {
				points_info:{...this.info},
	        };
	    },
	    watch: {
			info: {
				handler(newValue) {
					this.points_info = { ...newValue };
				},
				deep: true
			}
	    },
	    methods: {
	        handleInput(event) {
	            const value = event.detail.value;
				this.points_info.use_points = value;
				this.$emit('change', value);
	        }
	    }
	};
</script>

<style lang="scss">
	
	.points-box {
	    display: block;
	    margin: 0 32rpx 32rpx;
	}
	
	.points-box .header {
	    height: 120rpx;
	    padding: 32rpx 0 0 32rpx;
	    overflow: hidden;
	    font-weight: 700;
	    font-size: 30rpx;
	    background: #fff;
	    border-top-left-radius: 20rpx;
	    border-top-right-radius: 20rpx;
	}
	
	.points-box .inner {
	    position: relative;
	    z-index: 2;
	    display: block;
	    margin-top: -40rpx;
	    padding: 10rpx 32rpx;
	    background: #fff;
	    border-radius: 20rpx;
	}
	
	.points-box .inner .row {
	    display: flex;
	    align-items: center;
	    min-height: 90rpx;
	    border-top: 1px solid rgba(60,60,90,.05);
	}
	
	.points-box .inner .row .label {
	    display: block;
	    font-size: 26rpx;
	}
	
	.points-box .inner .row .flex {
	    flex: 1;
	}
	
	.points-box .inner .row .desc, 
	.points-box .inner .row .none {
	    display: block;
	    font-size: 22rpx;
	    opacity: .6;
	}
	
	.points-box .inner .row .amount {
	    display: block;
	    font-size: 26rpx;
	}
	
	.points-box .inner .row .amount.red {
	    color: $price-color; /* 应确保 $price-color 已定义 */
	}
	
	.pop-title {
	    background-color: #FFFFFF;
	}
	
	.pop-box {
	    height: 660rpx;
	    padding: 0rpx !important;
	    background-color: #F0F1F6 !important;
	}
	.input-number{
		font-size: 26rpx;
		text-align: right;
		padding: 10rpx;
		border: 1px solid #EFEFEF;
		border-radius: 20rpx;
	}
</style>
